<!-- 通用图片裁剪组件 -->

<template>
	<!-- 最外层容器 -->
	<view class="cutter-public-box-shell">
		<!-- 导图canvas - 与裁剪框一样大小 -->
		<canvas 
		v-if="state.isDomDraw" 
		id="myCanvasCutterPublic"
		:style="'width:'+cutter_width+'px; height:'+cutter_height+'px'"
		class="cutter-public-canvas-tempfile"
		canvas-id="myMediaCutterPublicTempFileDjy"></canvas>
	</view>
</template>


<script>
	// 通用方法引入
	import project from '@/common/js/public/project.js';
	
	/**
	 * 通用裁剪组件
	 * @description 通用裁剪组件，适用于简单的坐标裁剪，无法旋转，杜先生开发
	 * @property {String} tag 组件标识，默认：canvas-cutter
	 * @property {String,Number} img_width 要裁剪图片的宽度，单位：px
	 * @property {String,Number} img_height 要裁剪图片的高度，单位：px
	 * @property {String,Number} cutter_x 裁剪位置X坐标，单位：px
	 * @property {String,Number} cutter_y 裁剪位置Y坐标，单位：px
	 * @property {String,Number} cutter_width 裁剪框宽度，单位：px
	 * @property {String,Number} cutter_height 裁剪框高度，单位：px
	 * @event {Function()} methods_cutter 父级refs方法cutter()：进行图片压缩裁剪
	 */
	export default {
		props: {
			tag: { type: String, default: 'canvas-cutter' },
			img_width: { type: [String,Number], default: 0 },
			img_height: { type: [String,Number], default: 0 },
			cutter_x: { type: [String,Number], default: 0 },
			cutter_y: { type: [String,Number], default: 0 },
			cutter_width: { type: [String,Number], default: 0 },
			cutter_height: { type: [String,Number], default: 0 },
		},
		
		// 页面数据
		data() {
			return {
				
				// 计时器对象
				timer: {
					afresh: null, // 重新渲染画布
					select: null, // 搜索画布元素
				},
				
				// 状态数据
				state: {
					isDomDraw: false, // 是否渲染画布dom元素
				},
				
				// 资源原始数据
				resou: {
					path: '', // 原始图片地址数据
				},
				
			};
		},
		
		// 数据监听
		watch: {
			// 裁剪框宽度 变化
			cutter_width: {
				handler(newValue, oldValue) {
					// 重新渲染画布dom元素
					if (Number(newValue) > 0) { this.domCanvasAfresh(); }
				},
				immediate: true,
			},
			// 裁剪框高度 变化
			cutter_height: {
				handler(newValue, oldValue) {
					// 重新渲染画布dom元素
					if (Number(newValue) > 0) { this.domCanvasAfresh(); }
				},
				immediate: true,
			},
		},
		
		// 页面事件
		methods: {
			
			// ======================================== 父级$refs方法
			// 进行图片裁剪，参数：imgC-图片src属性  callback-成功回调
			cutter(imgC, callback) {
				
				// 直接使用传入进来的图片地址
				this.resou.path = imgC;
				
				// 搜索画布dom元素
				this.domSelectCanvas(()=>{
					// 画布绘图并且导出图片
					this.canvasExport((str_path)=>{
						
						// 将图片转化为base64格式
						project.imageToBase64({
							src: str_path, // 图片src属性值
							errToast: true, // 是否提示错误
							fail: () => {
								// 封装返回数据
								var data_back = {
									path: str_path,
									base64: '',
									data: '',
								};
								// 数据回调
								if (callback) { callback(data_back); }
							},
							success: (obj_base) => {
								// 封装返回数据
								var data_back = {
									path: str_path,
									base64: obj_base.src,
									data: obj_base.data,
								};
								// 数据回调
								if (callback) { callback(data_back); }
							}
						});
						
					});
				});
				
			},
			
			
			// ======================================== 数据处理
			// 重新渲染画布dom元素
			domCanvasAfresh() {
				// 先将画布销毁
				this.state.isDomDraw = false;
				// 清除存在的定时器
				if (this.timer.afresh) { clearTimeout(this.timer.afresh); }
				// 定时器定义
				this.timer.afresh = setTimeout(()=>{
					// 渲染画布
					this.state.isDomDraw = true;
				}, 300);
			},
			
			// 搜索画布dom元素
			domSelectCanvas(callback) {
				
				// 找到元素后的回调方法
				var fun_call = () => {
					// 延时执行
					if (this.timer.select) { clearTimeout(this.timer.select); }
					this.timer.select = setTimeout(()=>{
						// 获取dom信息
						uni.$focus.nodeInfo(this, '#myCanvasCutterPublic', (nodeD)=>{
							// 如果dom元素已经存在，执行成功回调
							if (nodeD.width > 0) { if (callback) { callback(); } }
							// 递归自身
							else { fun_call(); }
						});
					}, 500);
				};
				
				// 调用方法
				fun_call();
				
			},
			
			
			// ======================================== 元素事件
			// 画布绘图且导出，回调返回：str_path-导出图片资源地址
			canvasExport(callback) {
				// 获取导图canvas对象
				var obj_canvas = wx.createCanvasContext('myMediaCutterPublicTempFileDjy', this);
				// 画之前，先清除画布
				obj_canvas.clearRect(0, 0, this.cutter_width, this.cutter_height);
				// 将图片绘制到cav
				obj_canvas.drawImage(this.resou.path, -this.cutter_x, -this.cutter_y, this.img_width, this.img_height);
				// 调用draw方法
				obj_canvas.draw(false, setTimeout(()=>{
					
					// 画布导出图片
					uni.canvasToTempFilePath({
						canvasId: 'myMediaCutterPublicTempFileDjy',
						x: 0, // 画布x轴起点
						y: 0, // 画布y轴起点
						width: this.cutter_width, // 画布宽度
						height: this.cutter_height, // 画布高度
						destWidth: this.cutter_width, // 输出图片宽度
						destHeight: this.cutter_height, // 输出图片高度
						fileType: 'jpg',
						quality: 0.9,
						// 导出失败
						fail: () => {
							// 错误提示
							uni.showToast({
								title: '导出图片异常',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						},
						// 导出成功
						success: (res) => {
							// 图片资源地址
							var path_img = res.tempFilePath; // 在H5平台下，res.tempFilePath 为 base64
							// 回调数据
							if (callback) { callback(path_img); }
						}
					}, this);
					
				}, 500));
			},
			
		}
		
	}
</script>


<style>
	/* 页面最外层 */
	.cutter-public-box-shell{
		width: 1px; height: 1px;
		position: fixed; top: 0; right: 0;
		background-color: #000000;
		overflow: hidden;
	}
	/* 真实导图canvas */
	.cutter-public-canvas-tempfile{
		position: absolute; left: 100rpx; top: 0;
		background-color: #000000;
	}
</style>